<template>

  <!--
     $nextTick:在前面（所有的同步操作）的数据渲染完成后执行一个回调方法
     解决：
        1：数据不响应更新时，可以通过$nextTick决绝，静默刷新
                先销毁，再重新渲染读取数据，达到数据刷新
        2：在获取dom时，要等到相应的渲染完成在获取，比如做弹出框
        3：重置组件
                先销毁，再读取原有数据，达到重置
  -->
  <div v-if="show">

    <h4> {{ obj }}</h4>
    <button @click="objxg">新镇修改对象</button>
    <hr>

    <xx v-if="zc" />

    <button @click="cz"> 重置组件</button>
  </div>

</template>

<script>
export default {
  components: {
    xx: () => import('./components/minnetTick.vue')
  },
  data() {
    return {
      obj: {
        naem: '张三'
      },
      arr: [1, 2, 3],
      show: true,
      zc: true
    }
  },
  methods: {
    objxg() {
      this.obj.age = new Date().toLocaleString()

      this.show = false

      this.$nextTick(() => {
        this.show = true
      })
    },
    cz() {
      this.zc = false

      this.$nextTick(() => {
        this.zc = true
      })
    }
  }
}
</script>

<style>

</style>
